<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>AngularJS&middot;Hello AngularJS</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.css">
    <style>
        .demo {
            margin-bottom: 10px;
            border-bottom: 1px solid #1b926c;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="row">
        <nav class="navbar navbar-default navbar-static-top">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="../index.html">首页</a>
                </div>
                <ul class="nav navbar-nav">
                    <li class="active"><a href="javascript:void(0)">Link</a></li>
                    <li><a href="javascript:void(0)">Link2</a></li>
                </ul>
            </div>
        </nav>
    </div>
    <div class="row demo">
        <h3>Demo1:使用AngularJS的ngSanitize转义显示html</h3>

        <div ng-app="app">
            <div ng-controller="Ctrl">
                <div class="row">
                    <p>HTML代码片段:</p>
                    <p><textarea ng-model="snippet" cols="160" rows="6"></textarea></p>
                </div>
                <table class="table">
                    <tr>
                        <th>Directive</th>
                        <th>How</th>
                        <th>Source</th>
                        <th>Rendered</th>
                    </tr>
                    <tr id="bind-html-with-sanitize">
                        <td>ng-bind-html</td>
                        <td>Automatically uses $sanitize</td>
                        <td>
                            <pre><div ng-bind-html="snippet"><br/></div></pre>
                        </td>
                        <td>
                            <div ng-bind-html="snippet"></div>
                        </td>
                    </tr>
                    <tr id="bind-html-with-trust">
                        <td>ng-bind-html</td>
                        <td>By pass $sanitize by explicitly trusting the dangerous value</td>
                        <td>
                            <pre><div ng-bind-html="deliberatelyTrustDangerousSnippet()"></div></pre>
                        </td>
                        <td>
                            <div ng-bind-html="deliberatelyTrustDangerousSnippet()"></div>
                        </td>
                    </tr>
                    <tr id="bind-default">
                        <td>ng-bind</td>
                        <td>Automatically escapes</td>
                        <td>
                            <pre><div ng-bind="snippet"><br/></div></pre>
                        </td>
                        <td>
                            <div ng-bind="snippet"></div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script src="../static/js/angular-1.3.15/angular.js" type="text/javascript"></script>
<script src="../static/js/angular-1.3.15/angular-sanitize.js" type="text/javascript"></script>
<script>
    var app = angular.module('app', ['ngSanitize']);
    app.controller("Ctrl", function ($scope, $sce) {
        $scope.snippet =
                '<p style="color:blue"> 一段HTML\n' +
                        '<em style="color:tomato;font-weight:bold;" onmouseover="this.textContent=\'Awesome,Great,Nice\'">鼠标放到这里</em>\n' +
                        ' 代码片段</p>';
        $scope.deliberatelyTrustDangerousSnippet = function () {
            return $sce.trustAsHtml($scope.snippet);
        };
    });

</script>
